<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Linux Appliance Box &beta;</title>
    <link type="text/css" href="css/smoothness/jquery-ui.css" rel="stylesheet" />    
    <link type="text/css" href="css/main.css" rel="stylesheet"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/json2.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript">

    $.validator.setDefaults({
        submitHandler: fb_submit
    });

    $(function(){
        loadLeftPane("feedback");
        loadHeader();

        $("#fbform").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2 
                },
                email: {
                    required: true,
                    email: true
                },
                comment: {
                    required: true,
                    minlength: 5
                }
            },
            messages: {
                name: "Please enter a name",
                email: "Please enter a valid email address",
                comment: "<br>Please provide some comment (min. 5 characters)"
            }
        });

    });

    function fb_submit() {
        var app = new Object();
        app.name = $("input[name='name']").val();
        app.email = $("input[name='email']").val();
        app.comment = $("#fcomm").val();

        $("input[name='submit']").val("Submitting ...");

        $.ajax({
            type: "POST",
            url: "/feedback",
            data: app,
            async: false,
            success: function(msg){
                $("#content").html("<div class='' style='padding: 3%';>" + msg + "</div>");
            },
            error: function(msg){
                $("#content").html("<div class='' style='padding: 3%';>Your comment could not be submitted.</div>");
            }
        });
    }
    </script>

    <style type="text/css">
    </style>    
</head>

<body>
    <div id="header">
    </div>

    <div id="content">

    <div id="leftPane">
    </div>

    <div id="rightPane">
    <p>
    If you have any suggestions or feature ideas, please submit your request here.
    We are working on a bug tracking system. In the meantime please submit all your issues using the form below.
    </p>
    <form class="" id="fbform" method="post" action="">
       <p>
         <label for="fname">Name</label><br>
         <input id="fname" name="name" size="25"/>
       </p>
       <p>
         <label for="femail">Email</label><br>
         <input id="femail" name="email" size="25"/>
       </p>
       <p>
         <label for="fcomm">Comment</label><br>
         <textarea id="fcomm" name="comment" cols=50 rows=10></textarea>
       </p>
       <p>
         <input name="submit" type="submit" value="Submit"/>
       </p>
    </form>
    </div>

    </div>

    <div id="footer">
    </div>

</body>
</html>
